<template>
    <div class="register-patient">
        <h1>注册患者</h1>
        <form @submit.prevent="submitForm">
            <div>
                <label for="name">姓名:</label>
                <input type="text" id="name" v-model="form.name" required />
            </div>
            <div>
                <label for="gender">性别:</label>
                <select id="gender" v-model="form.gender" required>
                    <option value="Male">男</option>
                    <option value="Female">女</option>
                    <option value="Other">其他</option>
                </select>
            </div>
            <div>
                <label for="dateOfBirth">出生日期:</label>
                <input type="date" id="dateOfBirth" v-model="form.dateOfBirth" required />
            </div>
            <div>
                <label for="age">年龄:</label>
                <input type="number" id="age" v-model="form.age" />
            </div>
            <div>
                <label for="emergencyContact">紧急联系人:</label>
                <input type="text" id="emergencyContact" v-model="form.emergencyContact" />
            </div>
            <div>
                <label for="insuranceCardNumber">医保卡号:</label>
                <input type="text" id="insuranceCardNumber" v-model="form.insuranceCardNumber" required />
            </div>
            <button type="submit">提交</button>
        </form>
    </div>
</template>

<script>
import { registerpatient } from '@/api/user'; // Adjust the import path as necessary

export default {
    data() {
        return {
            form: {
                userId: localStorage.getItem('id') || null,
                name: '',
                gender: '',
                dateOfBirth: '',
                age: 0,
                emergencyContact: '',
                insuranceCardNumber: ''
            }
        };
    },
    methods: {
        async submitForm() {
            try {
                const payload = {
                    userId: this.form.userId,
                    name: this.form.name,
                    gender: this.form.gender,
                    dateOfBirth: this.form.dateOfBirth,
                    age: this.form.age,
                    emergencyContact: this.form.emergencyContact,
                    insuranceCardNumber: this.form.insuranceCardNumber
                };
                if (!this.form.userId) throw new Error('用户 ID 未设置');

                const numericValue = parseInt(this.form.userId, 10);
                if (isNaN(numericValue)) {
                    throw new Error(`用户 ID 格式错误: ${this.form.userId}`);
                }
                this.form.userId = numericValue;

                const response = await registerpatient(this.form);
                
                    this.$router.push({ name: 'Login' });
                
                
            } catch (error) {
                console.error(error);
                alert('提交失败，请重试');
            }
        }
    }
};
</script>

<style scoped>
.register-patient {
    max-width: 400px;
    margin: 0 auto;
}
form div {
    margin-bottom: 15px;
}
label {
    display: block;
    margin-bottom: 5px;
}
input,
select,
button {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}
button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
}
</style>